<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>创建社团</title>
    <link rel="stylesheet" href="${ctx}/static/passport/assets/build/kalendae.css" type="text/css" charset="utf-8">
    <link rel="stylesheet" href="${ctx}/static/passport/css/multiTime.css" />

    <script src="${ctx}/static/passport/assets/build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctx}/static/passport/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/passport/js/multiTime.js" ></script>
    <style type="text/css" media="screen">
        .kalendae .k-days span.closed {
            background:red;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        $(function(e){
            multiTime();
            alertTime();
            //appointPeople();
            //$('.k-btn-previous-year,.k-btn-next-year,.k-btn-previous-month,.k-btn-next-month').hide();
            $("#times li").click(function(){
                alertTime();
            })
            $("html").click(function(e){
                var Y=$("#timesInput").offset().top;
                var X=$("#timesInput").offset().left;
                if(e.target.id=="timesInput" || e.target.className=="hide_checkbox" || e.target.className=="Multi_time"
                        || e.target.id=="timeUl" ){
                    $("#times").css({
                        'display':'block',
                        'position':'absolute',
                        'top':Y+20+'px',
                        'left':X+'px',
                        'z-index':9
                    });
                }else {
                    $("#times").css({
                        'display':'none'
                    });
                }
            })
            //点击确定按钮后获取三个文本框的内容
            $("#date_check_btn").click(function(){
                var day = $("#date_check").val();
                var time = $("#timesInput").val();
                var num = $("#appointInput").val();

                var url ="${ctx}/appointmentDate/save";
                $.post(url,{"day":day,"time":time,"num":num},function(data)
                {
                    if(data.code == 0)
                    {
                        alert(data.message);
                        window.location.href="${ctx}/appointmentDate/list";
                    }
                },"json");

            })
        })
    </script>

</head>
<body>
<div class="content">
    <div class="guardianinformation_wrapper">
    <form id="inputForm" action="${ctx}/appointmentDate/save" method="post" class="form-horizontal">
        <div class="form-group">
            <label>请选择日期(可多选)：</label>
            <input id="date_check" type="text" class="auto-kal form-control"
                   data-kal="mode:'multiple',months:2,direction:'future5'" readonly="readonly">
            <div id="times"  nam="day" style="display: none; background: #efefef;"></div>
        </div>

        <div class="form-group">
            <label>请选择时间(可多选)：</label>
            <input type="text" class="form-control"  nam="time" size="2000" id="timesInput" readonly="readonly">
        </div>

        <div class="form-group">
            <label>每小时预约量：</label>
            <input type="text" class="form-control" style="width:200px;"  nam="num" id="appointInput" value="30" disabled>
        </div>
        <!--提交-->
        <div class="form-group summitbtn">
            <div class="col-lg-4 col-md-4">
                <input type="button" id="date_check_btn" class="btn btn-primary btn-lg btn-block" value="提交">
            </div>
        </div>
    </form>
    </div>
</div>
</body>
</html>